<template>
  <div class="fillcontain">
    <bt-col-header title="新增场景"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" ref="dataForm" label-width="120px" class="form-container">
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="场景名称" prop="sceneName">
              <el-input v-model="dataForm.sceneName" placeholder="场景名称"></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="场景标识" prop="sceneIdentify">
              <el-input v-model="dataForm.sceneIdentify" placeholder="场景标识"></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="流程" prop="flowIdentify">
              <el-select v-model="dataForm.flowIdentify" :disabled="isEditNode" filterable placeholder="请选择">
                <el-option v-for="item in oneEntityFlows" :key="item.flowIdentify" :label="item.flowName" :value="item.flowIdentify" @click.native.prevent="changeScenFlow(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <el-form-item label="场景说明" prop="remark">
              <el-input type="textarea" :rows="2" v-model="dataForm.sceneDesc" placeholder="备注"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="mb10 pl20">
        <el-tabs type="border-card" @tab-click="tabClick">
          <el-tab-pane label="流程图">
            <AntvFlow ref="antvFlow" disabled :data-form="dataForm" :taskinfo2="taskinfo2" :title="dataForm.flowName" :entity-list="entityList" :check-entity="checkEntity"></AntvFlow>
            <!-- <el-row class="p10">
          <el-button type="primary" @click.native.prevent="begin()">开始</el-button>
          <el-button type="primary" @click="showNext()">下一步</el-button>
          <el-button type="primary" @click="end()">结束</el-button>
          <el-button type="primary" @click="joinLine()">连接线</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
        </el-row> -->
            <!-- <div id="mountNode"></div> -->
          </el-tab-pane>
          <!-- <el-tab-pane label="流程节点">
            <el-row>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>节点列表</span>
                  </div>
                  <div class="temp_content">
                    <el-table :data="dataList" border height="850" style="width: 100%; ">
                      <el-table-column type="index" header-align="center" width="50" label="序号">
                      </el-table-column>
                      <el-table-column prop="flowShapeId" header-align="center" align="center" label="ID">
                      </el-table-column>
                      <el-table-column prop="flowShapeName" header-align="center" align="center" label="名称">
                      </el-table-column>
                      <el-table-column prop="flowNodeType" header-align="center" align="center" label="类型">
                        <template slot-scope="scope">
                          {{scope.row.flowNodeType | typePipe}}
                        </template>
                      </el-table-column> -->
                      <!-- <el-table-column
                      header-align="center"
                      align="center"
                      label="操作">
                      <template slot-scope="scope">
                        <el-button v-if="scope.row.flowNode != 'root'" type="text" size="small"
                                  @click="editNode(scope.row)">修改
                        </el-button>
                      </template>
                    </el-table-column> -->
                    <!-- </el-table>
                  </div>
                </el-card>

              </el-col>
              <el-col :span="12">
                <el-card class="box-card flow-img">
                  <div slot="header" class="clearfix">
                    <span>连接线列表</span>
                  </div>
                  <div class="temp_content">
                    <el-row class="mt10">
                      <el-table height="850" :data="circlePointList" border style="width: 100%; ">
                        <el-table-column type="index" header-align="center" width="50" label="序号">
                        </el-table-column>
                        <el-table-column prop="sourceName" header-align="center" align="center" label="起点">
                        </el-table-column>
                        <el-table-column prop="targetName" header-align="center" align="center" label="终点">
                        </el-table-column> -->
                        <!--
                      <el-table-column
                        header-align="center"
                        align="center"
                        label="操作">
                        <template slot-scope="scope">
                          <el-button type="text" size="small" @click="editPoint(scope.row)">修改</el-button>
                        </template>
                      </el-table-column> -->
                      <!-- </el-table>
                    </el-row>
                  </div>
                </el-card>
              </el-col>

            </el-row>
          </el-tab-pane> -->
          <el-tab-pane label="流程源码">
            <!--          <codemirror-->
            <!--            ref="mycode"-->
            <!--            :value="dataForm.flowJava"-->
            <!--            v-model="dataForm.flowJava"-->
            <!--            :options="cmOptions"-->
            <!--            class="code">-->
            <!--          </codemirror>-->
            <el-input type="textarea" readOnly :rows="30" v-model="dataForm.flowJava"></el-input>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="content-footer">
        <el-button type="info" plain @click="saveInfo()">保存</el-button>
        <el-button @click="backToList">取消</el-button>
      </div>
    </div>

    <el-dialog title="节点编辑" width="60%" :close-on-click-modal="false" :visible.sync="flowVisible" append-to-body>
      <el-form :model="flow" ref="dataForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点类型" prop="flowNodeType">
              <el-select v-model="flow.flowNodeType" :disabled="isEditNode" filterable placeholder="请选择">
                <el-option v-for="item in flowTypes" :key="item.value" :label="item.label" :value="item.value" @click.native.prevent="changeType(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="flowShapeName">
              <el-input v-model="flow.flowShapeName" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!--循环-->
        <el-row v-if="flow.flowNodeType==='3'">
          <el-col :span="12">
            <el-form-item label="循环实体" prop="flowShapeX">
              <el-select v-model="flow.entityId" filterable clearable placeholder="实体">
                <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.label" :value="item.entityId" @click.native.prevent="getEntityProperties(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实体属性" prop="flowShapeY">
              <el-select v-model="flow.itemId" filterable clearable placeholder="实体属性">
                <el-option v-for="item in entityItemInfos" :key="item.itemId" :label="item.label" :value="item.itemId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--子流程-->
        <el-row v-if="flow.flowNodeType==='6'">
          <el-col :span="12">
            <el-form-item label="子流程" prop="">
              <el-select v-model="flow.childFlowIdentify" filterable clearable placeholder="执行场景">
                <el-option v-for="item in flows" :key="item.flowIdentify" :label="item.flowName" :value="item.flowIdentify" @click.native.prevent="changeChildFlow(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="流程版本" prop="flowShapeX">-->
          <!--              <el-select v-model="flow.childFlowVersion" filterable clearable placeholder="流程版本">-->
          <!--                <el-option-->
          <!--                  v-for="item in flowVersionList"-->
          <!--                  :key="item.flowVersion"-->
          <!--                  :label="item.flowVersion"-->
          <!--                  :value="item.flowVersion">-->
          <!--                </el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>

        <!--规则组-->
        <el-row v-if="flow.flowNodeType==='2'">
          <el-col :span="12">
            <el-form-item label="执行规则组" prop="flowShapeX">
              <el-select v-model="flow.groupIdentify" filterable clearable placeholder="执行规则组">
                <el-option v-for="item in groupList" :key="item.groupIdentify" :label="item.groupName" :value="item.groupIdentify" @click.native.prevent="getGroupVersion(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="规则组版本" prop="flowShapeX">-->
          <!--              <el-select v-model="flow.groupVersion" filterable clearable placeholder="规则组版本">-->
          <!--                <el-option-->
          <!--                  v-for="item in sceneVersionList"-->
          <!--                  :key="item.groupVersion"-->
          <!--                  :label="item.groupVersion"-->
          <!--                  :value="item.groupVersion">-->
          <!--                </el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>

        <!--判断-->
        <el-row v-if="flow.flowNodeType==='5'">
          <el-row>
            <el-form-item label="" prop="">
              <el-button @click="addConditions">添加条件</el-button>
            </el-form-item>
          </el-row>

          <el-row v-for="(flowJudge,jindex) in flowJudges" :key="jindex">
            <el-row>
              <el-form-item label="条件类型" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.conditionType" filterable clearable placeholder="请选择">
                    <el-option v-for="item in conditionTyps" :key="item.value" :label="item.label" :value="item.value" @click.native.prevent="changeConditionType(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" class="mr10" v-if="flowJudge.conditionType=='2'">实体：</el-col>
                <el-col :span="4" class="mr10" v-if="flowJudge.conditionType=='2'">
                  <el-select v-model="flowJudge.entityId" filterable clearable placeholder="请选择">
                    <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native.prevent="changeEntityItem(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="clear(jindex)">删除</el-button>
                </el-col>
                <el-col :span="4" v-if="flowJudge.showRel">
                  <el-select v-model="flowJudge.conditionRel" filterable clearable placeholder="请选择">
                    <el-option v-for="item in relList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>

            </el-row>

            <!-- 条件为属性，左右两边都选择属性-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='1'">

              <el-form-item label="实体属性" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.leftEntityId" filterable clearable placeholder="实体">
                    <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native.prevent="changeLeftEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.leftProperty" filterable clearable placeholder="实体属性">
                    <el-option v-for="item in childList[`${flowJudge.leftEntityId}list`]" :key="item.itemId" :label="item.label" :value="item.itemId" @click.native.prevent="changeLeftPro(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.sysbol" filterable clearable placeholder="比较符">
                    <el-option v-for="item in sysbols" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.rightEntityId" filterable clearable placeholder="实体">
                    <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native.prevent="changeRightEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.rightProperty" filterable clearable placeholder="实体属性">
                    <el-option v-for="item in childList[`${flowJudge.rightEntityId}list`]" :key="item.itemId" :label="item.label" :value="item.itemId">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>

            </el-row>

            <!-- 条件为方法，左边选择属性，右边可输入值，或选择枚举值-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='2'">
              <el-row>
                <el-col :span="4" class="mr10" v-for="(m,index) in methodList" :key="index">
                  <span @click="insertM(m,jindex)" class="btn-span">{{m.className}}</span>
                </el-col>
              </el-row>
              <el-row v-if="showParams" style="padding: 10px 0;">
                <el-col :span="6" v-for="(p,index) in methodParams" :key="index">
                  <el-col :span="8">
                    <span>{{p.desc}}</span>
                  </el-col>
                  <el-col :span="14">
                    <el-input v-model="p.className" placeholder="请输入内容"></el-input>
                  </el-col>
                </el-col>
              </el-row>

            </el-row>

            <!-- 条件为值，左边选择属性，右边可输入值，或选择枚举值-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='3'">
              <el-form-item label="实体属性" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.leftEntityId" filterable clearable placeholder="实体">
                    <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native.prevent="changeLeftEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.leftProperty" filterable clearable placeholder="实体属性">
                    <el-option v-for="item in childList[`${flowJudge.leftEntityId}list`]" :key="item.itemId" :label="item.label" :value="item.itemId" @click.native.prevent="changeLeftPro(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.sysbol" filterable clearable placeholder="请选择比较符">
                    <el-option v-for="item in sysbols" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="flowJudge.rightValue" placeholder="请输入内容"></el-input>
                </el-col>
              </el-form-item>

            </el-row>

          </el-row>

          <el-col :span="12">
            <el-form-item label="否判断直接返回" prop="flowShapeX">
              <el-select v-model="flow.nflowRetrun" filterable clearable placeholder="否判断直接返回">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--方法-->
        <el-row v-if="flow.flowNodeType==='7'">
          <el-col :span="12">
            <el-form-item label="方法" prop="">
              <el-select v-model="flow.methodName" filterable clearable placeholder="请选择方法">
                <el-option v-for="item in methods" :key="item.name" :label="item.className" :value="item.name" @click.native.prevent="selectM(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 条件为方法，输入方法参数值-->
        <el-row v-if="flow.flowNodeType==='7' && showParams" style="padding: 10px 0;">
          <el-col :span="6" v-for="(p,index) in methodParams" :key="index">
            <el-form-item :label="p.desc" label-width="120px" prop="">
              <el-input v-model="p.className" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--节点坐标-->
        <el-row style="padding: 10px 0;">
          <el-col :span="12">
            <el-form-item label="节点X坐标" prop="flowShapeX">
              <el-input v-model="flow.flowShapeX" placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点Y坐标" prop="flowShapeY">
              <el-input v-model="flow.flowShapeY" placeholder="节点Y坐标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="circleList.length > 0 ">
          <el-col :span="12">
            <el-form-item label="结束循环" prop="flowShapeX">
              <el-select v-model="flow.endCircle" filterable clearable placeholder="结束循环">
                <el-option v-for="item in circleList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="judgeNodeList.length > 0 || njudgeNodeList.length>0">

          <el-row>
            <el-col :span="12">
              <el-form-item label="否判断节点" prop="">
                <el-select v-model="isJudgeNode" filterable clearable placeholder="是否为判断节点下的否节点">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click.native="nJude(item)">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row v-if="isJudgeNode==='1'">
            <el-col :span="12" v-if="njudgeNodeList.length>0">
              <el-form-item label="判断节点" prop="flowShapeX">
                <el-select v-model="flow.endYjudge" filterable clearable placeholder="判断节点">
                  <el-option v-for="item in njudgeNodeList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="njudgeNodeList.length>0">
              <el-form-item label="结束否判断" prop="flowShapeX">
                <el-select v-model="flow.endNjudge" filterable clearable placeholder="结束否判断">
                  <el-option v-for="item in njudgeNodeList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-else>
            <el-col :span="12" v-if="judgeNodeList.length>0">
              <el-form-item label="结束是判断" prop="flowShapeX">
                <el-select v-model="flow.endYjudge" filterable clearable placeholder="结束是判断">
                  <el-option v-for="item in judgeNodeList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="flowVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isEditNode && isJudgeNode==='0'" @click="editNext">确 定</el-button>
        <el-button type="primary" v-else-if="isJudgeNode==='1'" @click="editNnode">确 定</el-button>
        <el-button type="primary" v-else @click="next">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="节点连接线编辑" width="60%" :close-on-click-modal="false" :visible.sync="flowPointtVisible" append-to-body>
      <el-form :model="flow" ref="dataForm" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="起始节点" prop="flowShapeName">
              <el-select v-model="point.source" filterable placeholder="请选择">
                <el-option v-for="item in nodeList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId" @click.native.prevent="changeSource(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始节点X" prop="flowNodeType">
              <el-input v-model="point.x1" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始节点Y" prop="flowNodeType">
              <el-input v-model="point.y1" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="终止节点" prop="flowShapeName">
              <el-select v-model="point.target" filterable placeholder="请选择">
                <el-option v-for="item in nodeList" :key="item.flowShapeId" :label="item.flowShapeName" :value="item.flowShapeId" @click.native.prevent="changeTarget(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止节点X" prop="flowNodeType">
              <el-input v-model="point.x2" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止节点Y" prop="flowNodeType">
              <el-input v-model="point.y2" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="备注" prop="flowNodeType">
              <el-input v-model="point.labelText" placeholder="连接线说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="连线方向" prop="flowShapeName">
              <el-select v-model="point.circleType" filterable placeholder="请选择">
                <el-option v-for="item in circleTypes" :key="item.value" :label="item.label" :value="item.value" @click.native.prevent="changeCircleType(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修改x坐标" prop="flowNodeType">
              <el-col :span="4">
                <span @click="sub" class="span-txt">-</span>
              </el-col>
              <el-col :span="8">
                <el-input v-model="point.x1" disabled placeholder="X坐标"></el-input>
              </el-col>
              <el-col :span="4">
                <span @click="add" class="span-txt">+</span>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="flowPointtVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isEditPoint" @click="editNextPoint">确 定</el-button>
        <el-button type="primary" v-else @click="nextPoint">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getGraph, init, update } from '@/utils/g6Utils.min.js'
import AntvFlow from '@/components/antv-flow'
import { entityList, entityItemList, getEntityByItemID } from '@/api/baseConfig/entity'
import { listFlow, listFlowInfosByEntity, getInfo, getMethodName } from '@/api/ruleConfig/flow'
import { saveData, getData } from '@/api/ruleConfig/scene'
import { listGroupData, listGroupInfosByEntity } from '@/api/ruleConfig/groupInfo'
import constant from "../../../../../api/constant";

import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/ambiance.css'  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require('codemirror/mode/javascript/javascript') // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  name: 'App',
  data() {
    return {
      taskinfo2: {},
      childList: {},
      showParams: false,
      methodParams: [],
      methods: [],
      sceneId: null,
      oneEntityFlows: [],
      flowVersionList: [],//子流程版本信息
      checkEntity: [],//选择的模型
      curEntity: [],//选择的模型
      curEntityList: [],
      dataForm: {
        id: null,
        sceneName: '',
        flowIdentify: '',
        sceneIdentify: '',
        sceneDesc: '',
        flowJava: '',
        isEffect: '1'
      },
      cmOptions: {
        value: '',
        mode: 'x-java',
        theme: 'ambiance',
        readOnly: true,
        lineNumbers: true
      },
      sceneVersionList: [],
      flows: [],//流程集合
      options: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      isJudgeNode: '0',
      isNnode: false,
      showParams: false,
      enumFlag: false,
      methodList: [],
      methodParams: [],
      enumList: [],
      flowJudges: [],
      leftEntityItemInfos: [],
      rightEntityItemInfos: [],
      entityEnum: '',
      sysbols: constant.ruleConfig.sysbols,
      relList: [
        { label: 'and', value: 'and' },
        { label: 'or', value: 'or' }
      ],
      conditionTyps: [
        { label: '实体属性', value: '1' },
        { label: '枚举|输入值', value: '3' }
      ],
      isEditPoint: false,
      isEditNode: false,
      initFlag: false, // 是否初始化
      entityList: [], // 实体列表
      entityItemInfos: [], // 实体LIST属性列表
      groupList: [], // 规则组列表
      point: { // 连接线对象
        source: '',
        sourceName: '',
        target: '',
        targetName: '',
        labelText: '',
        edgeId: '',
        pointType: '',
        circleType: '',
        remark: '',
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 0
      },
      flow: { // 节点对象
        nflowRetrun: '0',
        flowShapeName: '', // name
        flowNode: '', // shape
        flowShapeId: '', // id
        flowShapeX: 0, // x
        flowShapeY: 0, // y
        flowShapeStatus: '', // status
        flowNextNode: '', //
        entityId: null,
        itemId: null,
        sceneId: null,
        groupIdentify: '',
        flowIdentify: '',
        endCircle: '',
        flowNodeType: '', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
        seq: 0,
        endYjudge: '',
        endNjudge: '',
        yflowShapeId: '',
        nflowShapeId: '',
        judgeNextNode: '',
        flowJudges: [],
        groupVersion: null,
        curEntity: '',
        childFlowIdentify: '',
        childFlowVersion: null,
        methodType: '',
        methodName: '',
        methodParams: '',
        methodExp: ''
      },
      flowTypes: constant.ruleConfig.flowTypes,
      circleTypes: [ //
        { label: '左边', value: 'left' },
        { label: '右边', value: 'right' }
      ],
      flowVisible: false,
      flowPointtVisible: false,
      dataList: [], // 所有节点
      nodeList: [], // 所有node节点
      circleList: [], // 所有循环节点
      pointList: [], // 所有连接线
      judgeNodeList: [], // 所有判断节点
      njudgeNodeList: [], // 所有否判断节点
      circlePointList: [], // 所有循环连接线
      x: 200,
      y: 100,
      index: 0,
      edgeIndex: 0,
      flowData: {
        nodes: [
          {
            shape: 'root',
            id: 'begin',
            name: '开始',
            x: 200,
            y: 100
          }
        ],
        edges: [],
        groups: [],
        guides: [
          {
            id: 'states',
            shape: 'states'
          }
        ],
        status: [
          {
            title: 'done',
            color: 'green',
            name: '返回结果'
          },
          {
            title: 'cflow',
            color: 'green',
            name: '子流程'
          },
          {
            title: 'ing',
            color: 'red',
            name: '执行规则'
          },
          {
            title: 'if',
            color: 'green',
            name: '执行判断'
          },
          {
            title: 'circle',
            color: '#EE8262',
            name: '循环'
          }
        ]
      }
    }
  },
  components: {
    codemirror,
    AntvFlow
  },
  props: {
    // sceneId: {
    //     type: Number,
    //     default: null
    // }
  },
  created() {
    let id = this.$route.params.id
    this.sceneId = id
    // console.log(this.sceneId)

    // 初始化实体
    this.getEntityList()
    this.initOneEntityFlows()
    this.initFlow()
    this.initMethods()
  },
  methods: {
    nJude(item) {
      if (this.isJudgeNode === '1' && this.njudgeNodeList.length <= 0) {
        this.$message.error("请确定该判断选择的否判断是否是直接返回")
        this.isJudgeNode = '0'
        return false
      }
      if (this.isJudgeNode === '0' && this.judgeNodeList.length <= 0) {
        this.$message.error("请确定该判断选择的是判断已经结束")
        this.isJudgeNode = '1'
        return false
      }
    },
    nextForMethod() {
      let inputValue = this.flow.methodName
      if (this.showParams && this.methodParams) {
        for (var i = 0; i < this.methodParams.length; i++) {
          let item = this.methodParams[i]
          let value = item.className
          if (!value) {
            this.$message.error('请输入' + item.desc)
            return false
          }
          if (item.type === 'int') {
            const digit = /^[0-9]*$/
            if (!digit.test(value)) {
              this.$message.error(item.desc + '只能输入数字')
              return false
            }
          } else if (item.type === 'String') {
            value = '"' + value + '"'
          }
          let p = '$' + item.name + '$'
          inputValue = inputValue.replace(p, value)
        }
        this.flow.methodParams = JSON.stringify(this.methodParams)
        this.flow.methodExp = 'MethodUtil.' + inputValue
        return true
      }
    },
    // 选择方法
    selectM(data) {
      this.flow.methodName = data.name
      this.showParams = false
      // 有参数
      if (data.type === '1' || data.type === '3') {
        if (data.params) {
          this.showParams = true
          this.methodParams = data.params
        }
      }
      if (data.type === '0' || data.type === '1' || data.type === '2') {
        this.flow.methodType = '0'
      } else {
        this.flow.methodType = '1'
      }
    },
    initMethods() {
      getMethodName({}).then(res => {
        this.methods = res.data.data
      })
    },
    changeScenFlow(item) {
      // console.log(item,'item');
      let params = {
        taskNo: item.taskNo,
        flowIdentify: item.flowIdentify,
        rowTaskNo: item.taskNo
      }
      this.dataList = [];
      this.pointList = [];
      this.checkEntity = [];
      this.flowData.nodes = [];
      this.flowData.edges = [];
      getInfo(params).then(res => {
        // console.log(res.data.data.relList);
        if (res.data.data) {
          this.dataForm.flowJava = res.data.data.flowJava
          if (res.data.data.flows) {
            this.dataList = res.data.data.flows
            this.dataList.forEach(item => {
              if (item.flowNode === 'node') {
                this.nodeList.push(item)
              }
              if (item.flowNodeType === '3') {
                this.circleList.push(item)
              }
              if (item.flowNodeType === '5') {
                this.judgeNodeList.push(item)
              }
            })
          }
          if (res.data.data.points && res.data.data.points.length) {
            this.pointList = res.data.data.points
            if (this.pointList) {
              this.pointList.forEach(item => {
                if (item.pointType === 'circle') {
                  this.circlePointList.push(item)
                }
              })
            }
          }
          res.data.data.relList.forEach(item => {
            this.checkEntity.push(item.entityId + '')
          })
          if (res.data.data.edges && res.data.data.edges.length) {
            this.flowData.edges = res.data.data.edges
            this.edgeIndex = this.flowData.edges.length
          }
          if (res.data.data.nodes) {
            this.flowData.nodes = res.data.data.nodes
          }
          if (this.initFlag) {
            // update(this.flowData);
            this.$refs['antvFlow'].clearFlow();
            this.$refs['antvFlow'].applyFlowData(res.data.data.ruleFlow.flowImg);
          } else {
            // console.log(this.flowData,'22222222');
            // init('mountNode', 500, 500, this.flowData)
            //渲染 antv/x6 流程图
            this.$refs['antvFlow'].init();
            this.$refs['antvFlow'].applyFlowData(res.data.data.ruleFlow.flowImg);
            this.initFlag = true
          }
        }
      })
    },
    // 初始化只关联一个实体类的流程
    initOneEntityFlows() {
      let params = {
        entity_size: 1,
        version_status: '1'
      }
      listFlow(params).then(res => {
        this.oneEntityFlows = res.data.data
      })
    },
    // 子流程选择
    changeChildFlow(data) {
      // console.log(data)
      // this.flow.childFlowVersion = data.flowVersion
      // let params = {
      //     flow_identify: this.flow.childFlowIdentify,
      //     is_effect:"1"
      // }
      // this.flowVersionList = []
      // listFlow(params).then(res => {
      //     if (res.data.data) {
      //         this.flowVersionList = res.data.data
      //         // 默认最新版本
      //         res.data.data.forEach(item=>{
      //             if(item.versionStatus === '1'){
      //                 this.flow.childFlowVersion = item.flowVersion
      //             }
      //         })
      //     }
      // })
      // console.log(this.dataList)
    },
    backToList() {
      // this.$emit('refreshVisble')
      // this.$emit('refreshDataList')
      constant.clearTag(this)
      this.$router.push({ name: constant.routerName.listScene })
    },
    tabClick() {

    },
    // 规则组选择
    getGroupVersion(data) {
      this.flow.flowShapeName = data.groupName;
      // let params = {
      //     group_identify: this.flow.groupIdentify,
      //     is_effect:"1"
      // }
      // this.sceneVersionList = []
      // listGroupData(params).then(res => {
      //     if (res.data.data) {
      //         this.sceneVersionList = res.data.data
      //         // 默认最新版本
      //         res.data.data.forEach(item=>{
      //             if(item.versionStatus === '1'){
      //                 this.flow.groupVersion = item.groupVersion
      //             }
      //         })
      //     }
      // })
    },
    changeCircleType(item) {
      if (item.value === 'left') {
        this.point.x1 = 0
        this.point.x2 = 0
      }
    },
    // 新增否节点
    editNnode() {
      if (this.isJudgeNode === '1' && this.njudgeNodeList.length <= 0) {
        this.$message.error("请确定该判断选择的否判断是否是直接返回")
        return false
      }
      if (!this.flow.flowNodeType) {
        this.$message.error('请选择节点类型')
        return false
      } else {
        if (this.flow.flowNodeType === '2' && !this.flow.groupIdentify) {
          this.$message.error('请选择执行规则组')
          return false
        } else if (this.flow.flowNodeType === '3') {
          if (!this.flow.entityId || !this.flow.itemId) {
            this.$message.error('请选择实体及要循环的属性')
            return false
          }
          for (var i = 0; i < this.dataList.length; i++) {
            let item = this.dataList[i]
            if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
              this.$message.error('该实体及要循环的属性已存在循环节点')
              return false
            }
          }
        }
      }

      if (!this.flow.flowShapeName) {
        this.$message.error('请输入节点名称')
        return false
      }

      // 如果是判断节点
      if (this.flow.flowNodeType === '5') {
        this.flow.flowJudges = []
        this.flowJudges.forEach(item => {
          item.flowId = this.flow.flowId
          item.flowShapeId = this.flow.flowShapeId
          this.flow.flowJudges.push(item)
        })
      }
      // 如果编辑
      if (this.isEditNode) {
        this.flowData.nodes.forEach(item => {
          if (item.id === this.flow.flowShapeId) {
            item.name = this.flow.flowShapeName
          }
        })
      } else { // 新增
        this.y = this.y + 100
        this.index = this.index + 1
        this.edgeIndex = this.edgeIndex + 1
        let nodeId = 'node' + this.index
        let item = {
          shape: 'node',
          id: nodeId,
          name: this.flow.flowShapeName, // 名称
          status: this.flow.flowShapeStatus, // 形状
          x: this.x,
          y: this.y
        }
        this.flowData.nodes.push(item)

        // 画否判断的连接线
        this.endNFlowJudge(this.flow)
      }
      update(this.flowData)

      this.dataList.push(this.flow)
      if (this.flow.flowNodeType === '3') {
        this.circleList.push(this.flow)
      } else if (this.flow.flowNodeType === '5') {
        this.judgeNodeList.push(this.flow)
      }
      this.nodeList.push(this.flow)
      this.isNnode = false
      this.flowVisible = false
      // console.log(this.dataList)
      // console.log(this.pointList)
    },
    // 否节点 画线
    endNFlowJudge(data) {
      let that = this
      let startJudgeFlow = {}
      this.edgeIndex = this.edgeIndex + 1

      // 找出判断节点
      let dataList = []
      this.dataList.forEach(item => {
        if (that.flow.endYjudge && item.flowShapeId === that.flow.endYjudge) {
          startJudgeFlow = item
          item.nflowShapeId = this.flow.flowShapeId
        }
        if (this.flow.endNjudge && item.flowShapeId === that.flow.endNjudge) {
          item.judgeNextNode = 'node' + (this.index + 1)
        }
        dataList.push(item)
      })
      this.dataList = dataList
      this.flow.endYjudge = ''

      let edge = {
        id: 'edge' + this.edgeIndex,
        source: startJudgeFlow.flowShapeId,
        sourceName: startJudgeFlow.flowShapeName,
        target: data.flowShapeId,
        circleType: 'right',
        targetName: data.flowShapeName,
        type: 'circle',
        label: '否',
        controlPoints: [
          {
            x: 0,
            y: startJudgeFlow.flowShapeY
          },
          {
            x: 0,
            y: data.flowShapeY
          }
        ]
      }
      this.flowData.edges.push(edge)

      let point = {
        source: startJudgeFlow.flowShapeId,
        target: data.flowShapeId,
        sourceName: startJudgeFlow.flowShapeName,
        targetName: data.flowShapeName,
        edgeId: 'edge' + this.edgeIndex,
        pointType: 'circle',
        labelText: '否',
        circleType: 'right',
        x1: 0,
        x2: 0,
        y1: startJudgeFlow.flowShapeY,
        y2: data.flowShapeY,
        seq: this.edgeIndex
      }
      this.pointList.push(point)
    },

    // 添加条件
    addConditions() {
      let flowJudge = {
        sysbol: '',
        flowShapeId: '',
        flowId: null,
        leftProperty: null,
        rightProperty: null,
        entityId: null,
        leftEntityId: null,
        rightEntityId: null,
        conditionType: '',
        conditionRel: '',
        showRel: false,
        rightValue: ''
      }
      if (this.flowJudges.length > 0) {
        this.flowJudges[this.flowJudges.length - 1].showRel = true
        this.flowJudges[this.flowJudges.length - 1].conditionRel = 'and'
      }
      this.flowJudges.push(flowJudge)
    },
    // 选择方法
    insertM(data, jindex) {
      this.showParams = false
      // 有参数
      if (data.type === '1' || data.type === '3') {
        if (data.params) {
          this.showParams = true
          this.methodParams = data.params
        }
      }
    },
    // 左实体
    changeLeftEntity(item) {
      let params = {
        id: item.entityId + ''
      }
      // 获取实体类属性
      // this.leftEntityItemInfos = []
      // entityItemList(params).then(res => {
      //     if (res.data.data) {
      //         res.data.data.forEach(item => {
      //             item['label'] = item.itemName + '--' + item.itemIdentify
      //             this.leftEntityItemInfos.push(item)
      //         })
      //     }
      // })
      let name = item.entityId + 'list'
      this.childList[name] = []
      entityItemList(params).then((res) => {
        if (res.data.data) {
          res.data.data.forEach((item) => {
            item["label"] = item.itemName + "--" + item.itemIdentify;
            this.childList[name].push(item)
          });
          // console.log(this.childList)
          this.$forceUpdate()
        }
      });
    },
    // 右实体
    changeRightEntity(item) {
      let params = {
        id: item.entityId + ''
      }
      // 获取实体类属性
      // entityItemList(params).then(res => {
      //     this.rightEntityItemInfos = [] // res.data.data
      //     if (res.data.data) {
      //         res.data.data.forEach(item => {
      //             item['label'] = item.itemName + '--' + item.itemIdentify
      //             this.rightEntityItemInfos.push(item)
      //         })
      //     }
      // })
      let name = item.entityId + 'list'
      this.childList[name] = []
      entityItemList(params).then((res) => {
        if (res.data.data) {
          res.data.data.forEach((item) => {
            item["label"] = item.itemName + "--" + item.itemIdentify;
            this.childList[name].push(item)
          });
          // console.log(this.childList)
          this.$forceUpdate()
        }
      });
    },
    // 左属性
    changeLeftPro(item) {
      if (item.itemType === 'String') {
        this.sysbols = [
          { label: '==', value: '1' },
          { label: '!=', value: '2' }
        ]
      } else {
        this.sysbols = [
          { label: '==', value: '1' },
          { label: '!=', value: '2' },
          { label: '<=', value: '3' },
          { label: '<', value: '4' },
          { label: '>=', value: '5' },
          { label: '>', value: '6' }
        ]
      }
    },
    // 重置条件
    clear(jindex) {
      this.flowJudges.splice(jindex, 1)
      // this.flowJudges[jindex].sysbol = ''
      // this.flowJudges[jindex].leftProperty = null
      // this.flowJudges[jindex].rightProperty = null
      // this.flowJudges[jindex].entityId = null
      // this.flowJudges[jindex].leftEntityId = null
      // this.flowJudges[jindex].rightValue = ''
      // this.flowJudges[jindex].conditionType = ''
    },
    // 判断节点 条件类型改变事件
    changeConditionType(item, jindex) {
      this.flowJudges[jindex].sysbol = ''
      this.flowJudges[jindex].leftProperty = null
      this.flowJudges[jindex].rightProperty = null
      this.flowJudges[jindex].entityId = null
      this.flowJudges[jindex].leftEntityId = null
      this.flowJudges[jindex].rightValue = ''
    },
    // 判断节点 条件类型为方法时，实体类改变事件
    changeEntityItem(item) {
    },
    // 初始化
    initFlow() {
      if (!this.sceneId) {
        //初始化 antv/x6 流程图
        this.$nextTick(() => {
          this.$refs['antvFlow'].init()
        })
        return
      }
      let params = {
        sceneId: this.sceneId
      }

      let that = this
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      getData(params).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.data.data) {
          that.dataForm = res.data.data.scene
          that.dataForm.flowJava = res.data.data.flow.flowJava

          that.dataList = res.data.data.flow.flows
          that.dataList.forEach(item => {
            if (item.flowNode === 'node') {
              that.nodeList.push(item)
            }
            if (item.flowNodeType === '3') {
              that.circleList.push(item)
            }
            if (item.flowNodeType === '5') {
              that.judgeNodeList.push(item)
              this.njudgeNodeList.push(item);
            }
          })
          that.pointList = res.data.data.flow.points
          if (that.pointList) {
            that.pointList.forEach(item => {
              if (item.pointType === 'circle') {
                that.circlePointList.push(item)
              }
            })
          }
          res.data.data.flow.relList.forEach(item => {
            that.checkEntity.push(item.entityId + '')
          })
          that.flowData.edges = res.data.data.flow.edges
          that.flowData.nodes = res.data.data.flow.nodes
          // 取消g6
          /* init('mountNode', 620, 835, that.flowData)
          that.edgeIndex = that.flowData.edges.length
          that.initFlag = true
          this.initGraphClick() */
          //渲染 antv/x6 流程图
          that.$refs['antvFlow'].init();
          that.$refs['antvFlow'].applyFlowData(res.data.data.flow.ruleFlow.flowImg);
          that.initFlag = true
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },

    initGraphClick() {
      let graph = getGraph()
      graph.on('node:click', (ev) => {
        const shape = ev.target;
        const node = ev.item._cfg;
        for (var i = 0; i < this.dataList.length; i++) {
          let item = this.dataList[i]
          if (item.flowNode === 'node' && item.flowShapeId === node.id) {
            // console.log(item)
            if (item.flowNodeType === '2') {
              let params = {
                group_identify: item.groupIdentify,
                is_effect: "1"
              }
              listGroupData(params).then(res => {
                if (res.data.data) {
                  let group = res.data.data[0]
                  this.$router.push({ path: "/drools-ruleConfig/group/add-or-update/" + group.id })
                }
              })


            } else if (item.flowNodeType === '6') {
              let params = {
                flow_identify: item.childFlowIdentify,
                is_effect: "1"
              }
              listFlow(params).then(res => {
                if (res.data.data) {
                  let flow = res.data.data[0]
                  this.$router.push({ path: "/drools-ruleConfig/flow/edit-flow/" + flow.flowId })
                }
              })
            }
            break;
          }
        }
        // console.log(node)
      });
    },

    // 获取实体类的属性
    getEntityProperties() {
      let params = {
        id: this.flow.entityId + ''
      }
      // 获取实体类属性
      this.entityItemInfos = []
      entityItemList(params).then(res => {
        if (res.data.data) {
          res.data.data.forEach(item => {
            if (item.itemType === 'List') {
              item['label'] = item.itemName + '--' + item.itemIdentify
              this.entityItemInfos.push(item)
            }
          })
        }
      })
    },
    // 获取实体类的属性
    getEntityList() {
      let params = {}
      entityList(params).then(res => {
        if (res.data.data) {
          this.entityList = []
          res.data.data.forEach(item => {
            item['label'] = item.entityIdentify + ' -- ' + item.entityName
            this.entityList.push(item)
          })
        }
      })
    },
    // 获取规则组信息
    getGroupList(ids) {
      let params = {
        ids: JSON.stringify(ids)
      }
      listGroupInfosByEntity(params).then(res => {
        this.groupList = res.data.data
      })
    },
    // 获取子流程信息
    getFlowList(ids) {
      let params = {
        ids: JSON.stringify(ids)
      }
      listFlowInfosByEntity(params).then(res => {
        this.flows = res.data.data
      })
    },
    // 重置
    reset() {
      this.dataList = []
      this.pointList = []
      this.circleList = []
      this.circlePointList = []
      this.flowJudges = []
      this.judgeNodeList = []
      this.njudgeNodeList = [];
      this.nodeList = []
      this.flowData.nodes = []
      this.flowData.edges = []
      this.x = 200
      this.y = 100
      this.index = 0
      this.edgeIndex = 0
      this.begin()
    },
    // 减横坐标
    sub() {
      this.point.x1 = this.point.x1 - 50
      this.point.x2 = this.point.x2 - 50
    },
    // 加横坐标
    add() {
      this.point.x1 = this.point.x1 + 50
      this.point.x2 = this.point.x2 + 50
    },
    // 弹出连线框
    joinLine() {
      if (this.dataList.length <= 2) {
        this.$message.error('请添加至少3个节点')
        return false
      }
      this.point = {
        source: '',
        sourceName: '',
        target: '',
        targetName: '',
        labelText: '',
        edgeId: '',
        pointType: '',
        circleType: '',
        remark: '',
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 0
      }
      this.flowPointtVisible = true
    },
    editPoint(item) {
      this.point = item
      this.isEditPoint = true
      this.flowPointtVisible = true
    },
    // 修改连接线
    editNextPoint() {
      let data1 = []
      this.circlePointList = []
      this.pointList.forEach(item => {
        if (item.edgeId === this.point.edgeId) {
          item = this.point
        }
        if (item.pointType === 'circle') {
          this.circlePointList.push(item)
        }
        data1.push(item)
      })
      this.pointList = data1
      debugger
      let startStatu = ''
      let endStatu = ''
      // 找出判断节点
      this.dataList.forEach(item => {
        if (item.flowShapeId === this.point.source) {
          startStatu = item.flowNodeType
        }
        if (item.flowShapeId === this.point.target) {
          endStatu = item.flowNodeType
        }
      })

      let edge = {
        id: this.point.edgeId,
        source: this.point.source,
        target: this.point.target,
        endStatu: endStatu,
        startStatu: startStatu,
        label: this.point.labelText,
        circleType: this.point.circleType,
        controlPoints: [
          {
            x: this.point.x1,
            y: this.point.y1
          },
          {
            x: this.point.x2,
            y: this.point.y2
          }
        ]
      }
      let data2 = []
      this.flowData.edges.forEach(item => {
        if (item.source === this.point.source && item.target === this.point.target) {
          item = edge
        }
        data2.push(item)
      })
      this.flowData.edges = data2

      // console.log(this.flowData)
      update(this.flowData)
      this.flowPointtVisible = false
    },
    // 确定连线
    nextPoint() {
      this.y = this.y + 100
      this.edgeIndex = Number(this.edgeIndex) + 1

      let startStatu = ''
      let endStatu = ''
      // 找出判断节点
      this.dataList.forEach(item => {
        if (item.flowShapeId === this.point.source) {
          startStatu = item.flowNodeType
        }
        if (item.flowShapeId === this.point.target) {
          endStatu = item.flowNodeType
        }
      })

      let edge = {
        id: 'edge' + this.edgeIndex,
        source: this.point.source,
        target: this.point.target,
        endStatu: endStatu,
        startStatu: startStatu,
        label: this.point.labelText,
        circleType: this.point.circleType,
        controlPoints: [
          {
            x: this.point.x1,
            y: this.point.y1
          },
          {
            x: this.point.x2,
            y: this.point.y2
          }
        ]
      }
      this.flowData.edges.push(edge)
      // console.log(this.flowData)
      update(this.flowData)

      this.point.edgeId = 'edge' + this.edgeIndex
      this.point.pointType = 'circle'
      this.point.seq = this.edgeIndex

      this.pointList.push(this.point)
      this.circlePointList.push(this.point)
      this.flowPointtVisible = false
    },


    // 修改节点状态
    changeType(item) {
      // console.log(item, "item");
      this.flow.flowShapeStatus = item.status;
      // 根据判断类型除判断、其他，循环节点外，节点名称取节点类型名
      if (item.value == "3" || item.value == "4" || item.value == "5") {
        this.flow.flowShapeName = "";
        this.isflowName = false;
      } else {
        //this.flow.flowShapeName = item.label;
        this.isflowName = true;
      }
      if (this.flow.flowShapeStatus === "if") {
        if (this.flowJudges.length === 0) {
          this.addConditions();
        }
      }
    },
    // 修改起点
    changeSource(item) {
      this.point.x1 = item.flowShapeX + 100
      this.point.y1 = item.flowShapeY
      this.point.sourceName = item.flowShapeName
    },
    // 修改终点
    changeTarget(item) {
      this.point.x2 = item.flowShapeX + 100
      this.point.y2 = item.flowShapeY
      this.point.targetName = item.flowShapeName
    },
    // 开始按钮
    begin() {
      for (var i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i]
        if (item.flowShapeId === 'begin') {
          this.$message.error('流程已开始，无需再添加')
          return false
        }
      }
      if (this.checkEntity.length <= 0) {
        this.$message.error('请关联实体')
        return false
      }
      let flow = {
        flowShapeName: '开始', // name
        flowNode: 'root', // shape
        flowShapeId: 'begin', // id
        flowShapeX: this.x, // x
        flowShapeY: this.y, // y
        flowShapeStatus: '', // status
        flowNextNode: 'node1', //
        flowNodeType: '1', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
        seq: this.index,
        curEntitys: JSON.stringify(this.checkEntity)
      }
      this.curEntity = this.checkEntity
      this.dataList.push(flow)

      this.flowData.nodes = [{
        shape: 'root',
        id: 'begin',
        name: '开始',
        x: 200,
        y: 100
      }]
      if (this.initFlag) {
        update(this.flowData)
      } else {
        init('mountNode', 500, 500, this.flowData)
        this.initFlag = true
      }
    },

    // 结束按钮
    end() {
      if (this.dataList.length <= 0) {
        this.$message.error('请添加开始节点')
        return false
      }
      if (this.dataList.length === 1) {
        this.$message.error('请添加流程节点')
        return false
      }
      for (var i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i]
        if (item.flowShapeId === 'end') {
          this.$message.error('流程已结束，无需再添加')
          return false
        }
      }
      this.y = this.y + 100
      this.edgeIndex = this.edgeIndex + 1
      let item = {
        shape: 'root',
        id: 'end',
        name: '结束',
        x: this.x,
        y: this.y
      }
      this.flowData.nodes.push(item)
      let preNode = 'node' + (this.index)
      let edge = {
        id: 'edge' + this.edgeIndex,
        source: preNode,
        type: 'next',
        target: 'end'
      }

      let flow = {
        flowShapeName: '结束', // name
        flowNode: 'root', // shape
        flowShapeId: 'end', // id
        flowShapeX: this.x, // x
        flowShapeY: this.y, // y
        flowShapeStatus: '', // status
        flowNextNode: '', //
        flowNodeType: '1', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
        seq: (this.index + 1)
      }
      this.dataList.push(flow)
      this.dataList.forEach(item => {
        if (item.flowShapeId === preNode) {
          item.flowNextNode = 'end'
        }
      })

      let point = {
        source: preNode,
        edgeId: 'edge' + this.edgeIndex,
        pointType: 'next',
        target: 'end',
        seq: this.edgeIndex
      }

      this.pointList.push(point)
      this.flowData.edges.push(edge)
      // console.log(this.flowData)
      update(this.flowData)
    },

    // 修改节点
    editNode(item) {
      this.flow = item
      this.flowJudges = this.flow.flowJudges
      this.flowVisible = true
      this.isEditNode = true
      this.isJudgeNode = '0'
      if (this.flow.entityId) {
        this.getEntityProperties()
      }
      if (this.flowJudges) {
        this.flowJudges.forEach(item => {
          if (item.leftEntityId) {
            let params = {
              id: item.leftEntityId + "",
            };
            let name = item.leftEntityId + 'list'
            this.childList[name] = []
            entityItemList(params).then((res) => {
              if (res.data.data) {
                res.data.data.forEach((item) => {
                  item["label"] = item.itemName + "--" + item.itemIdentify;
                  this.childList[name].push(item)
                });
                // console.log(this.childList)
                this.$forceUpdate()
              }
            });
          } else if (item.rightEntityId) {
            let params = {
              id: item.rightEntityId + "",
            };
            let name = item.rightEntityId + 'list'
            this.childList[name] = []
            entityItemList(params).then((res) => {
              if (res.data.data) {
                res.data.data.forEach((item) => {
                  item["label"] = item.itemName + "--" + item.itemIdentify;
                  this.childList[name].push(item)
                });
                // console.log(this.childList)
                this.$forceUpdate()
              }
            });
          }

        })
      }
      if (this.flow.flowNodeType === '7') {
        this.methodParams = JSON.parse(this.flow.methodParams)
        if (this.methodParams.length > 0) {
          this.showParams = true
        }
      }
      //当前实体类
      this.curEntityList = []
      let curEntity = JSON.parse(this.flow.curEntitys)
      curEntity.forEach(item => {
        this.entityList.forEach(e => {
          let id = e.entityId + ''
          if (item === id) {
            this.curEntityList.push(e)
          }
        })
      })
      //当前规则组
      this.getGroupList(curEntity)
      this.getFlowList(curEntity)
      this.dataList.forEach(item => {
        if (item.nflowShapeId === this.flow.flowShapeId) {
          this.isJudgeNode = '1'
          this.flow.endYjudge = item.flowShapeId
        }
      })
      // console.log(this.dataList)
    },
    // 弹出下一步框
    showNext() {
      this.isNnode = false
      this.isJudgeNode = '0'

      if (this.dataList.length <= 0) {
        this.$message.error('请添加开始节点')
        return false
      }
      for (var i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i]
        if (item.flowShapeId === 'end') {
          this.$message.error('流程已结束，如需修改请重置')
          return false
        }
      }

      this.flowVisible = true

      this.flowJudges = []
      this.isEditNode = false
      let y = this.y + 100
      let index = Number(this.index) + 1
      let nodeId = 'node' + index
      let nextNode = Number(this.index) + 2
      this.flow = {
        flowShapeName: '', // name
        flowNode: 'node', // shape
        flowShapeId: nodeId, // id
        flowShapeX: this.x, // x
        flowShapeY: y, // y
        flowShapeStatus: '', // status
        flowNextNode: 'node' + nextNode,
        flowNodeType: '', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
        endCircle: '',
        seq: index,
        curEntitys: JSON.stringify(this.curEntity)
      }
      //当前实体类
      this.curEntityList = []
      this.curEntity.forEach(item => {
        this.entityList.forEach(e => {
          let id = e.entityId + ''
          if (item === id) {
            this.curEntityList.push(e)
          }
        })
      })
      this.getGroupList(this.curEntity)
      this.getFlowList(this.curEntity)
      // console.log(this.flow)
    },

    // 修改下一步
    editNext() {
      this.circleList = []
      this.nodeList = []
      for (var i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i]
        if (item.flowShapeId !== this.flow.flowShapeId && item.entityId) {
          if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
            this.$message.error('该实体及要循环的属性已存在循环节点')
            return false
          }
        }
      }
      if (this.flow.flowNodeType === '5') {
        if (!this.flowJudges || this.flowJudges.length <= 0) {
          this.$message.error('请新增判断条件')
          return false
        }
        for (let i = 0; i < this.flowJudges.length; i++) {
          let item = this.flowJudges[i]
          if (!item.conditionType) {
            this.$message.error('请选择条件类型')
            return false
          }
          if (item.conditionType === '1') {
            if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightEntityId && item.rightProperty)) {
              this.$message.error('条件内容不完整')
              return false
            }
          }
          if (item.conditionType === '3') {
            if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightValue)) {
              this.$message.error('条件内容不完整')
              return false
            }
          }
        }
      }

      if (this.flow.flowNodeType === '7') {
        if (!this.nextForMethod()) {
          return
        }
      }
      this.dataList.forEach(item => {
        if (item.flowShapeId === this.flow.flowShapeId) {
          item = this.flow
        }
        if (item.flowNodeType === '3') {
          this.circleList.push(item)
        }
        if (item.flowNodeType === '2') {
          this.nodeList.push(item)
        }
      })
      this.flowData.nodes.forEach(item => {
        if (item.id === this.flow.flowShapeId) {
          item.name = this.flow.flowShapeName
        }
      })
      // console.log(this.flowData)
      update(this.flowData)
      this.flowVisible = false

      // 是否结束否判断节点
      let dataList = []
      this.dataList.forEach(item => {
        if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
          item.endNjudge = this.flow.endNjudge
        }
        if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
          item.judgeNextNode = 'node' + (this.index + 1)
        }
        dataList.push(item)
      })
      this.dataList = dataList

      // 如果是判断节点
      if (this.flow.flowNodeType === '5') {
        this.flow.flowJudges = []
        this.flowJudges.forEach(item => {
          item.flowId = this.flow.flowId
          item.flowShapeId = this.flow.flowShapeId
          this.flow.flowJudges.push(item)
        })
      }
    },

    // 确定下一步
    next() {
      if (!this.flow.flowNodeType) {
        this.$message.error('请选择节点类型')
        return false
      } else {
        if (this.flow.flowNodeType === '2' && !this.flow.groupIdentify) {
          this.$message.error('请选择执行规则组')
          return false
        } else if (this.flow.flowNodeType === '3') {
          if (!this.flow.entityId || !this.flow.itemId) {
            this.$message.error('请选择实体及要循环的属性')
            return false
          }
          for (var i = 0; i < this.dataList.length; i++) {
            let item = this.dataList[i]
            if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
              this.$message.error('该实体及要循环的属性已存在循环节点')
              return false
            }
          }
        } else if (this.flow.flowNodeType === '5') {
          if (!this.flowJudges || this.flowJudges.length <= 0) {
            this.$message.error('请新增判断条件')
            return false
          }
          for (let i = 0; i < this.flowJudges.length; i++) {
            let item = this.flowJudges[i]
            if (!item.conditionType) {
              this.$message.error('请选择条件类型')
              return false
            }
            if (item.conditionType === '1') {
              if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightEntityId && item.rightProperty)) {
                this.$message.error('条件内容不完整')
                return false
              }
            }
            if (item.conditionType === '3') {
              if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightValue)) {
                this.$message.error('条件内容不完整')
                return false
              }
            }
          }
        } else if (this.flow.flowNodeType === '6') {
          if (!this.flow.childFlowIdentify || !this.flow.childFlowVersion) {
            this.$message.error('请选择流程及版本')
            return false
          }
        }
      }

      if (!this.flow.flowShapeName) {
        this.$message.error('请输入节点名称')
        return false
      }
      this.y = this.y + 100
      this.index = this.index + 1
      this.edgeIndex = this.edgeIndex + 1
      let nodeId = 'node' + this.index
      let item = {
        shape: 'node',
        id: nodeId,
        name: this.flow.flowShapeName, // 名称
        status: this.flow.flowShapeStatus, // 形状
        x: this.x,
        y: this.y
      }
      this.flowData.nodes.push(item)
      if (this.index === 1) {
        let edge = {
          id: 'edge' + this.edgeIndex,
          source: 'begin',
          type: 'next',
          target: nodeId
        }
        let point = {
          source: 'begin',
          edgeId: 'edge' + this.edgeIndex,
          pointType: 'next',
          target: nodeId,
          seq: this.edgeIndex
        }
        this.pointList.push(point)
        this.flowData.edges.push(edge)
      } else {
        let edge = {
          id: 'edge' + this.edgeIndex,
          source: 'node' + (this.index - 1),
          type: 'next',
          target: nodeId
        }
        let point = {
          source: 'node' + (this.index - 1),
          edgeId: 'edge' + this.edgeIndex,
          pointType: 'next',
          seq: this.edgeIndex,
          target: nodeId
        }
        let preFlow = this.dataList[this.dataList.length - 1]
        if (preFlow.flowNodeType === '5') {
          edge.label = '是'
          point.labelText = '是'
          preFlow.yflowShapeId = this.flow.flowShapeId
          this.dataList[this.dataList.length - 1] = preFlow
        }
        this.pointList.push(point)
        this.flowData.edges.push(edge)
      }

      // 循环线
      if (this.flow.endCircle) {
        this.endCircle(this.flow)

        //终止循环则移除终止的循环的list属性的实体ID
        this.dataList.forEach(item => {
          if (this.flow.endCircle === item.flowShapeId) {
            let params = {
              id: item.itemId + ''
            }
            //节点为循环，则把list属性所属的实体ID加入下一节点的实体
            getEntityByItemID(params).then(res => {
              if (res.data.data && res.data.data.entityId) {
                let entitys = []
                let id = res.data.data.entityId + ''
                this.curEntity.forEach(c => {
                  if (c != id) {
                    entitys.push(c)
                  }
                })
                this.curEntity = entitys
              }
            })
          }
        })
      }

      // 如果是判断节点
      if (this.flow.flowNodeType === '5') {
        this.flow.flowJudges = []
        this.flowJudges.forEach(item => {
          item.flowId = this.flow.flowId
          item.flowShapeId = this.flow.flowShapeId
          this.flow.flowJudges.push(item)
        })
      }

      update(this.flowData)

      this.dataList.push(this.flow)

      // 是否结束否判断节点
      let dataList = []
      this.dataList.forEach(item => {
        if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
          item.endNjudge = this.flow.endNjudge
          item.judgeNextNode = 'node' + (this.index + 1)
        }
        if (this.flow.endYjudge && item.flowShapeId === this.flow.endYjudge) {
          item.endYjudge = this.flow.endYjudge
        }
        dataList.push(item)
      })
      this.dataList = dataList
      if (this.flow.endYjudge) {
        let arr = []
        this.judgeNodeList.forEach(item => {
          if (this.flow.endYjudge === item.flowShapeId) {

          } else {
            arr.push(item)
          }
        })
        this.judgeNodeList = arr
      }
      if (this.flow.endNjudge) {
        let arr = []
        this.njudgeNodeList.forEach(item => {
          if (this.flow.endNjudge === item.flowShapeId) {

          } else {
            arr.push(item)
          }
        })
        this.njudgeNodeList = arr
      }

      if (this.flow.flowNodeType === '3') {
        let params = {
          id: this.flow.itemId + ''
        }
        //节点为循环，则把list属性所属的实体ID加入下一节点的实体
        getEntityByItemID(params).then(res => {
          if (res.data.data) {
            let flag = false
            this.curEntity.forEach(item => {
              if (res.data.data.entityId == item) {
                flag = true
              }
            })
            if (!flag) {
              this.curEntity.push(res.data.data.entityId + '')
            }
          }
        })
        this.circleList.push(this.flow)
      } else if (this.flow.flowNodeType === '5') {
        //如果否判断直接返回，则否判断集合不保存该节点
        if (this.flow.nflowRetrun === '1') {

        } else {
          this.njudgeNodeList.push(this.flow)
        }
        this.judgeNodeList.push(this.flow);
      }
      this.nodeList.push(this.flow)
      this.flowVisible = false
    },

    // 循环终止线
    endCircle(flow) {
      let endCircle = {}
      this.circleList = []
      this.dataList.forEach(item => {
        if (item.flowShapeId === flow.endCircle) {
          endCircle = item
        } else {
          if (item.flowNodeType === '3') {
            this.circleList.push(item)
          }
        }
      })

      this.edgeIndex = this.edgeIndex + 1
      let edge = {
        id: 'edge' + this.edgeIndex,
        source: flow.flowShapeId,
        sourceName: flow.flowShapeName,
        target: flow.endCircle,
        circleType: 'right',
        targetName: endCircle.flowShapeName,
        type: 'circle',
        label: '循环结束',
        controlPoints: [
          {
            x: flow.flowShapeX + 100,
            y: flow.flowShapeY
          },
          {
            x: endCircle.flowShapeX + 100,
            y: endCircle.flowShapeY
          }
        ]
      }
      this.flowData.edges.push(edge)

      let point = {
        source: flow.flowShapeId,
        target: flow.endCircle,
        sourceName: flow.flowShapeName,
        targetName: endCircle.flowShapeName,
        edgeId: 'edge' + this.edgeIndex,
        pointType: 'circle',
        labelText: '循环结束',
        circleType: 'right',
        x1: flow.flowShapeX + 100,
        x2: endCircle.flowShapeX + 100,
        y1: flow.flowShapeY,
        y2: endCircle.flowShapeY,
        seq: this.edgeIndex
      }
      this.pointList.push(point)
      this.circlePointList.push(point)
    },

    // 更新流程图
    toUpdate() {
      const data = {
        nodes: [
          {
            shape: 'root',
            id: 'begin',
            name: '开始',
            x: 100,
            y: 100
          },
          {
            shape: 'node',
            id: 'shenhe1',
            name: '审核',
            status: 'done',
            x: 200,
            y: 200
          },
          {
            shape: 'node',
            id: 'xiafa',
            name: '下发',
            status: 'done',
            x: 200,
            y: 300
          },
          {
            shape: 'node',
            id: 'qianshou',
            name: '签收',
            style: {                 // 关键形样式（优先级高于color）
              fill: 'red',
              stroke: 'blue'
            },
            status: 'done',
            x: 300,
            y: 300
          },
          {
            shape: 'node',
            id: 'chuzhi',
            name: '处置',
            status: 'timeout',
            x: 300,
            y: 400
          },
          {
            shape: 'node',
            id: 'shangbao',
            name: '上报',
            status: '',
            x: 300,
            y: 500
          },
          {
            shape: 'node',
            id: 'shenhe2',
            name: '审核',
            status: '',
            x: 200,
            y: 500
          },
          {
            shape: 'root',
            id: 'end',
            name: '结束',
            status: '',
            x: 100,
            y: 500
          }
        ],
        edges: [
          {
            id: 'edge1',
            source: 'begin',
            target: 'shenhe1',
            controlPoints: [
              {
                x: 230,
                y: 115
              }
            ]
          },
          {
            id: 'edge2',
            source: 'shenhe1',
            target: 'xiafa'
          },
          {
            id: 'edge3',
            source: 'xiafa',
            target: 'qianshou'
          },
          {
            id: 'edge4',
            source: 'qianshou',
            target: 'chuzhi'
          },
          {
            id: 'edge5',
            source: 'chuzhi',
            target: 'shangbao',
            label: '完成'
          },
          {
            id: 'edge6',
            source: 'shangbao',
            target: 'shenhe2'
          },
          {
            id: 'edge7',
            source: 'shenhe2',
            target: 'end'
          },
          {
            id: 'edge8',
            source: 'shenhe1',
            target: 'begin',
            label: '不通过',
            controlPoints: [
              {
                x: 130,
                y: 215
              }
            ]
          }
        ],
        groups: [],
        guides: [
          {
            id: 'states',
            shape: 'states'
          }
        ],
        status: [
          {
            title: 'done',
            color: 'green',
            name: '已完成'
          }
        ]
      }
      // update(data);
      init('mountNode', 620, 835, data)
    },

    saveInfo() {
      if (!this.dataForm.sceneIdentify) {
        this.$message.error('请输入场景标识')
        return false
      } else {
        var patrn = /^[a-z][a-zA-Z0-9]{0,50}$/
        if (!patrn.test(this.dataForm.sceneIdentify)) {
          this.$message.error('标识由字母和数字组成，且首字母为小写长度小于50')
          return false
        }

      }
      if (!this.dataForm.sceneName) {
        this.$message.error('请输入场景名称')
        return false
      }
      if (!this.dataForm.flowIdentify) {
        this.$message.error('请关联流程')
        return false
      }
      if (this.dataList.length <= 0) {
        this.$message.error('请添加流程图信息！')
        return false
      }
      let flag = false
      let flag1 = false
      for (var i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i]
        if (item.flowShapeId === 'begin') {
          flag = true
        }
        if (item.flowShapeId === 'end') {
          flag1 = true
        }
      }
      if (!flag) {
        this.$message.error('请添加开始节点')
        return false
      }
      if (!flag1) {
        this.$message.error('请添加结束节点')
        return false
      }

      // 判断条件
      let flowJudes = []
      this.dataList.forEach(item => {
        if (item.flowNodeType === '5' && item.flowJudges) {
          item.flowJudges.forEach(i => {
            i.flowId = item.flowId
            i.flowShapeId = item.flowShapeId
            flowJudes.push(i)
          })
        }
      })

      let params = {
        dataForm: JSON.stringify(this.dataForm),
        flows: JSON.stringify(this.dataList),
        points: JSON.stringify(this.pointList),
        judges: JSON.stringify(flowJudes)
      }
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      saveData(params).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.data && res.data.resultCode === 0) {
          this.$message.success(res.data.resultMsg)
          // this.$emit('refreshVisble')
          // this.$emit('refreshDataList')
          this.backToList()
        } else {
          this.$message.error(res.data.resultMsg)
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    }
  },
  mounted() {
  },
  filters: {
    typePipe: function (value) {
      let label = ''
      if (value === '2') {
        label = '执行规则节点'
      } else if (value === '3') {
        label = '循环节点'
      } else if (value === '4') {
        label = '其他'
      } else if (value === '1') {
        label = '起止节点'
      } else if (value === '5') {
        label = '判断节点'
      }
      return label
    }
  }
}
</script>

<style>
.mod-home {
  line-height: 1.5;
}

#mountNode {
  width: 620px;
  margin: 0 auto !important;
  height: 835px;
  position: absolute;
  border: 1px saddlebrown solid;
}

.span-txt {
  display: block;
  /*background-color: #f5f7fa;*/
  /*border-color: #e4e7ed;*/
  color: #c0c4cc;
  text-align: center;
  cursor: pointer;
}

.title {
  background-color: #17b3a3;
  color: #fff;
  padding: 10px;
}

.mt10 {
  margin-top: 10px;
}

/* 提示框的样式 */
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}

.flow-img {
  min-height: 937px;
}

.el-tabs--border-card > .el-tabs__content {
  height: 937px;
}

.p10 {
  padding: 10px;
}
/*.code{*/
/*  height:800px;*/
/*}*/
/*.CodeMirror{*/
/*  height:780px !important;*/
/*}*/
/*.CodeMirror-scroll{*/
/*  height:780px !important;*/
/*}*/
</style>

